<!DOCTYPE html>
<html>
<head>
    <title>Fig. 2.40 - Electromagnetic Field Structure</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw a double-headed arrow
        function drawDoubleArrow(x1, y1, x2, y2, size) {
            ctx.save();
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);

            let angle = Math.atan2(y2 - y1, x2 - x1);
            
            // Arrowhead at (x2, y2)
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - size * Math.cos(angle - Math.PI / 6), y2 - size * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - size * Math.cos(angle + Math.PI / 6), y2 - size * Math.sin(angle + Math.PI / 6));

            // Arrowhead at (x1, y1)
            ctx.moveTo(x1, y1);
            ctx.lineTo(x1 + size * Math.cos(angle - Math.PI / 6), y1 + size * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x1, y1);
            ctx.lineTo(x1 + size * Math.cos(angle + Math.PI / 6), y1 + size * Math.sin(angle + Math.PI / 6));
            
            ctx.stroke();
            ctx.restore();
        }

        // --- Main Drawing ---
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        // Draw the main structure
        ctx.beginPath();
        
        // Front arc of the cylinder
        const t1_base = { x: 133, y: 205 };
        const t2_base = { x: 238, y: 178 };
        ctx.moveTo(t1_base.x, t1_base.y);
        ctx.bezierCurveTo(110, 310, 290, 330, t2_base.x, t2_base.y);
        
        // Left plate structure
        const p_flt = { x: 183, y: 123 }; // Front-Left-Top
        const p_blt = { x: 363, y: 153 }; // Back-Left-Top
        ctx.moveTo(t1_base.x, t1_base.y);
        ctx.lineTo(143, 162);
        ctx.lineTo(p_flt.x, p_flt.y);
        ctx.lineTo(p_blt.x, p_blt.y);

        // Right plate structure
        const p_frt = { x: 288, y: 108 }; // Front-Right-Top
        const p_brt = { x: 468, y: 138 }; // Back-Right-Top
        const t2_bottom_back = { x: 418, y: 208 };
        ctx.moveTo(t2_base.x, t2_base.y);
        ctx.lineTo(p_frt.x, p_frt.y);
        ctx.lineTo(p_brt.x, p_brt.y);
        ctx.lineTo(t2_bottom_back.x, t2_bottom_back.y);
        ctx.lineTo(t2_base.x, t2_base.y);

        // Cylinder body side line
        ctx.moveTo(244, 260); // A point on the right side of the front arc
        ctx.lineTo(424, 290);

        ctx.stroke();

        // --- Labels and Markers ---
        ctx.font = "italic 20px Times New Roman";
        ctx.fillStyle = 'black';

        // Points A and B
        const pointA = { x: 273, y: 138 };
        const pointB = { x: 313, y: 128 };
        ctx.beginPath();
        ctx.arc(pointA.x, pointA.y, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText("A", pointA.x - 15, pointA.y - 10);
        
        ctx.beginPath();
        ctx.arc(pointB.x, pointB.y, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText("B", pointB.x + 5, pointB.y + 5);

        // Radius R
        const center = { x: 185, y: 250 };
        ctx.beginPath();
        ctx.arc(center.x, center.y, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.moveTo(center.x, center.y);
        ctx.lineTo(130, 275);
        ctx.lineWidth = 1;
        ctx.stroke();
        ctx.fillText("R", 150, 270);

        // Dimension l
        drawDoubleArrow(250, 370, 430, 370, 8);
        ctx.fillText("l", 335, 365);
        
        // Dimension a
        drawDoubleArrow(480, 140, 480, 210, 8);
        ctx.fillText("a", 490, 180);

        // Dimension d
        drawDoubleArrow(320, 148, 350, 138, 8);
        ctx.fillText("d", 335, 130);

        // Figure Caption
        ctx.font = "bold 20px Times New Roman";
        ctx.fillText("Fig. 2.40", 220, 420);

    </script>
</body>
</html>